import { defineComponent, computed, shallowRef, defineAsyncComponent } from 'vue'
import '@/render/styles/variable.scss'
import './index.scss'

export default defineComponent({
  name: 'SubTitle',
  props: {
    metaData: {
      type: Object,
      default: () => {}
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  emits: ['select', 'change', 'form-change'],
  setup(props, { emit }) {
    const titleClass = computed(() => {
      let classStr = ''
      if (!props.readonly) {
        classStr = `sub-title ${props.isSelected ? 'active' : ''}`
      } else {
        classStr = 'titlePanel'
      }
      return classStr
    })

    const isTitleHide = computed(() => {
      if (props.readonly && !subTitle.value) {
        return false
      }
      return true
    })

    const subTitle = computed(() => {
      return props.metaData?.title
    })

    const handleClick = () => {
      if (props.readonly) return
      emit('select')
    }

    const onTitleInput = (val) => {
      if (!props.isSelected) {
        return
      }
      emit('change', {
        key: 'title',
        value: val
      })
    }

    const richEditorView = shallowRef(null)
    if (!props.readonly) {
      richEditorView.value = defineAsyncComponent(() => import('@/common/Editor/RichEditor.vue'))
    }

    const inputEditorView = shallowRef(null)
    if (!props.readonly) {
      inputEditorView.value = defineAsyncComponent(() => import('@/common/Editor/InputEditor.vue'))
    }

    return {
      props,
      titleClass,
      isTitleHide,
      subTitle,
      richEditorView,
      inputEditorView,
      handleClick,
      onTitleInput
    }
  },
  render() {
    const { readonly, subTitle, onTitleInput, inputEditorView, richEditorView } = this
    return (
      <div class={['sub-title-warp', !readonly ? 'pd15' : '']} onClick={this.handleClick}>
        {this.isTitleHide ? (
          <div class={this.titleClass}>
            {!readonly ? (
              <inputEditorView
              onInput={onTitleInput}
              onChange={onTitleInput}
              modelValue={subTitle}
              placeholder="请输入活动名称"
              class="subTitle"
              maxLength={50}
              />
              // <richEditorView
              //   toolbarKeys={[]}
              //   modelValue={subTitle}
              //   onInput={onTitleInput}
              //   placeholder="请输入活动名称1"
              //   class="subTitle"
              // />
            ) : (
              <div class="subTitle" v-html={subTitle}></div>
            )}
          </div>
        ) : (
          ''
        )}
      </div>
    )
  }
})
